<template>
  <div ref="myChart" :style="{ width: width, height: height }"></div>
</template>
<script>
import echarts from 'echarts'
import ecStat from 'echarts-stat'

function renderItem(params, api) {
  var yValue = api.value(2)
  var start = api.coord([api.value(0), yValue])
  var size = api.size([api.value(1) - api.value(0), yValue])
  var style = api.style()

  return {
    type: 'rect',
    shape: {
      x: start[0] + 1,
      y: start[1],
      width: size[0] - 2,
      height: size[1]
    },
    style: style
  }
}

export default {
  name: 'ECharts',
  props: {
    /**
     * 图表类型
     * bar 柱状图
     * line 折线图
     * pie 饼图
     * mix 混合图
     * scatter 散点图
     * radar 雷达图
     * histogram 直方图
     * boxplot 盒须图
     */
    type: {
      type: String,
      required: true,
      validator: function(value) {
        return ['bar', 'line', 'pie', 'mix', 'scatter', 'radar', 'histogram', 'boxplot'].indexOf(value) !== -1
      }
    },
    /**
     * 图表主题 可选 'light' 'dark' 不填为默认
     */
    theme: {
      type: String,
      default: null
    },
    /**
     * 图表宽度
     */
    width: {
      type: String,
      default: '100%'
    },
    /**
     * 图表高度
     */
    height: {
      type: String,
      default: '40vh'
    },
    /**
     * X轴文字
     */
    xside: Array,
    /**
     * X轴名字
     */
    xname: String,
    /**
     * y轴名字(左)
     */
    yname_l: String,
    /**
     * y轴名字（右）
     */
    yname_r: String,
    /**
     * 是否横向显示，默认否（可不写）
     */
    horiz: {
      type: Boolean,
      default: false
    },
    /**
     * 值轴线单位（左）
     */
    unit_l: String,
    /**
     * 值轴线单位（右）
     */
    unit_r: String,
    /**
     * X轴间隔跳跃，全显示为0,（可不写）
     */
    xinterval: Number,
    /**
     * X轴倾斜角度,默认不倾斜,（可不写）
     */
    xrotate: Number,
    /**
     * Y轴是否从0开始(左)
     */
    y0_l: {
      type: Boolean,
      default: true
    },
    /**
     * Y轴是否从0开始(右)
     */
    y0_r: {
      type: Boolean,
      default: true
    },
    /**
     * 是否显示y0_l的Y轴信息
     */
    show_y_l: {
      type: Boolean,
      default: true
    },
    /**
     * 是否显示y0_r的Y轴信息
     */
    show_y_r: {
      type: Boolean,
      default: true
    },
    /**
     * 是否显示X轴信息
     */
    show_x: {
      type: Boolean,
      default: true
    },
    /**
     * 是否颠倒数据顺序
     */
    inverse: {
      type: Boolean,
      default: false
    },
    /**
     * 图例
     */
    legend: {
      type: Boolean,
      default: true
    },
    /**
     * legend 组件离容器上侧的距离 可用'10', '10%', 'top', 'middle', 'bottom'
     */
    legend_top: {
      type: String,
      default: '0'
    },
    /**
     * legend 组件离容器左侧的距离 可用'10', '10%', 'left', 'center', 'right'
     */
    legend_left: {
      type: String,
      default: 'center'
    },
    /**
     * 图例颜色
     */
    legendColor: {
      type: Array,
      default:() => []
    },
    /**
     * 展示数据用例
     */
    series: {
      type: Array,
      default: () => []
    },
    /**
     * 展示数据用例
     */
    series_r: {
      type: Array,
      default: () => []
    },
    /**
     * 大标题
     */
    title: String,
    /**
     * 副标题
     */
    subtitle: String,
    /**
     * 标题位置 center/left/right
     */
    title_pos: {
      type: String,
      default: 'left'
    },
    /**
     * 提示框
     */
    tooltip: {
      type: Boolean,
      default: true
    },
    /**
     * 工具栏
     */
    toolbox: {
      type: Boolean,
      default: true
    },
    /**
     * pie label位置
     */
    pie_pos: {
      type: String,
      default: 'outer'
    },
    /**
     * pie 是否空心环形
     */
    pie_ring: {
      type: Boolean,
      default: false
    },
    /**
     * pie 外径
     */
    pie_radius: {
      type: Number,
      default: 70
    },
    /**
     * 雷达图 指标项及范围
     */
    indicator: Array,
    /**
     * true为平滑曲线，false为直线
     */
    smooth: {
      type: Boolean,
      default: false
    },
    /**
     * 直方图指定区间
     */
    histogram_interval: {
      type: Number,
      default: null
    },
    /**
     * 直方图指最小值
     */
    histogram_min: {
      type: Number,
      default: null
    },
  },
  data() {
    return {
      myChart: null, // echarts实例
      seriname: [] // 展示数据用例名
    }
  },
  mounted() {
    switch (this.type) {
      case 'bar':
        this.BarOrLine()
        break
      case 'line':
        this.BarOrLine()
        break
      case 'pie':
        this.pie()
        break
      case 'mix':
        this.mix()
        break
      case 'scatter':
        this.scatter()
        break
      case 'radar':
        this.radar()
        break
      case 'histogram':
        this.histogram()
        break
      case 'boxplot':
        this.boxplot()
        break
      default:
        break
    }
  },
  destroyed() {
    // 清理工作 避免内存泄漏
    // 销毁监听事件
    window.removeEventListener('resize', () => {
      if (this.myChart) {
        this.myChart.resize()
      }
    })
    // 销毁 Echarts 实例
    if (this.myChart) {
      this.myChart.dispose()
    }
  },
  methods: {
    /**
     * 初始化echarts
     */
    initECharts(options) {
      // 基于准备好的dom，初始化echarts实例
      this.myChart = echarts.init(this.$refs.myChart, this.theme, { renderer: 'svg' })
      // 绘制图表
      this.myChart.setOption(options)
      // 添加图表窗口自适应监听
      window.addEventListener('resize', () => {
        this.myChart.resize()
      })

      this.myChart.on('click', params => {
        this.$emit('click', params)
      })
    },
    /**
     * 改变图表数据
     */
    changeECharts(type, newOpt) {
      this.myChart.clear()
      let opt
      newOpt.type = type
      switch (type) {
        case 'bar':
          opt = this.BarOrLine_option(newOpt)
          break
        case 'line':
          opt = this.BarOrLine_option(newOpt)
          break
        case 'pie':
          opt = this.pie_option(newOpt)
          break
        case 'mix':
          opt = this.mix_option(newOpt)
          break
        case 'scatter':
          opt = this.scatter_option(newOpt)
          break
        case 'radar':
          opt = this.radar_option(newOpt)
        case 'histogram':
          opt = this.histogram_option(newOpt)
          break
      }
      this.myChart.setOption(opt, true)
    },
    /**
     * 生成柱状/折线图
     */
    BarOrLine() {
      const options = this.BarOrLine_option()
      this.initECharts(options)
    },
    /**
     * 配置柱状/折线图option
     */
    BarOrLine_option(newOpt) {
      let bl_title = this.title
      let bl_subtitle = this.subtitle
      let bl_title_pos = this.title_pos
      let bl_tooltip = this.tooltip
      let bl_toolbox = this.toolbox
      let bl_inverse = this.inverse
      let bl_xname = this.xname
      let bl_xside = this.xside
      let bl_yname_l = this.yname_l
      let bl_y0_l = this.y0_l
      let bl_legend = this.legend
      let bl_legend_top = this.legend_top
      let bl_legend_left = this.legend_left
      let bl_xinterval = this.xinterval
      let bl_xrotate = this.xrotate
      let bl_horiz = this.horiz
      let bl_series = this.series
      let bl_type = this.type
      let bl_unit_l = this.unit_l
      let bl_smooth = this.smooth

      if (newOpt) {
        if (newOpt.title) {
          bl_title = newOpt.title
        }
        if (newOpt.subtitle) {
          bl_subtitle = newOpt.subtitle
        }
        if (newOpt.title_pos) {
          bl_title_pos = newOpt.title_pos
        }
        if (newOpt.tooltip) {
          bl_tooltip = newOpt.tooltip
        }
        if (newOpt.toolbox) {
          bl_toolbox = newOpt.toolbox
        }
        if (newOpt.inverse) {
          bl_inverse = newOpt.inverse
        }
        if (newOpt.xname) {
          bl_xname = newOpt.xname
        }
        if (newOpt.xside) {
          bl_xside = newOpt.xside
        }
        if (newOpt.yname_l) {
          bl_yname_l = newOpt.yname_l
        }
        if (newOpt.y0_l) {
          bl_y0_l = newOpt.y0_l
        }
        if (newOpt.legend) {
          bl_legend = newOpt.legend
        }
        if (newOpt.legend_top) {
          bl_legend_top = newOpt.legend_top
        }
        if (newOpt.legend_left) {
          bl_legend_left = newOpt.legend_left
        }
        if (newOpt.xinterval) {
          bl_xinterval = newOpt.xinterval
        }
        if (newOpt.xrotate) {
          bl_xrotate = newOpt.xrotate
        }
        if (newOpt.horiz) {
          bl_horiz = newOpt.horiz
        }
        if (newOpt.series) {
          bl_series = newOpt.series
        }
        if (newOpt.type) {
          bl_type = newOpt.type
        }
        if (newOpt.unit_l) {
          bl_unit_l = newOpt.unit_l
        }
        if (newOpt.smooth) {
          bl_smooth = newOpt.smooth
        }
      }

      // 配置option
      let options = {
        title: {
          text: bl_title, // 大标题
          subtext: bl_subtitle, // 副标题
          left: bl_title_pos // 标题位置
        },
        tooltip: {
          trigger: bl_tooltip ? 'axis' : ''
        },
        color: this.legendColor,
        toolbox: {
          // 工具栏
          show: bl_toolbox,
          orient: 'vertical',
          right: '1%',
          top: '2%',
          iconStyle: {
            color: '#FFEA51',
            borderColor: '#FFA74D',
            borderWidth: 1
          },
          feature: {
            saveAsImage: { show: true },
            magicType: {
              show: true,
              type: ['line', 'bar', 'stack', 'tiled']
            },
            restore: { show: true }
          }
        },
        xAxis: {
          type: 'category',
          inverse: bl_inverse,
          minInterval: 1, // 设置只显示整数
          name: bl_xname,
          axisLabel: {
            show: true
          },
          data: bl_xside
        },
        yAxis: {
          type: 'value',
          min: 0,
          minInterval: 1, // 设置只显示整数
          name: bl_yname_l,
          scale: bl_y0_l,
          axisLabel: {
            formatter: val => {
              return val + (bl_unit_l ? bl_unit_l : '')
            }
          }
        },
        series: []
      }

      if (bl_legend) {
        options.legend = {
          top: bl_legend_top,
          left: bl_legend_left,
          data: this.seriname
        }
      }

      if (bl_xinterval) {
        options.xAxis.axisLabel.interval = bl_xinterval
      }
      if (bl_xrotate) {
        options.xAxis.axisLabel.rotate = bl_xrotate
      }
      if (bl_horiz) {
        let axis = options.yAxis
        options.yAxis = options.xAxis
        options.xAxis = axis
      }
      bl_series.forEach((v, i) => {
        options.series.push({
          barMaxWidth: 30,
          name: v.name,
          type: bl_type,
          data: v.value,
          smooth: bl_smooth,
          itemStyle: v.itemStyle,
          symbolSize: v.symbolSize,
          smooth: v.smooth
        })
        this.seriname.push(v.name)
      })

      return options
    },
    /**
     * 饼图
     */
    pie() {
      const options = this.pie_option()
      this.initECharts(options)
    },
    /**
     * 配置饼图option
     */
    pie_option(newOpt) {
      let pie_title = this.title
      let pie_subtitle = this.subtitle
      let pie_series = this.series
      let pie_title_pos = this.title_pos
      let pie_tooltip = this.tooltip
      let pie_toolbox = this.toolbox
      let pie_pie_pos = this.pie_pos
      let pie_pie_radius = this.pie_radius
      let pie_legend = this.legend
      let pie_legend_top = this.legend_top
      let pie_legend_left = this.legend_left
      let pie_pie_ring = this.pie_ring

      if (newOpt) {
        if (newOpt.title) {
          pie_title = newOpt.title
        }
        if (newOpt.subtitle) {
          pie_subtitle = newOpt.subtitle
        }
        if (newOpt.series) {
          pie_series = newOpt.series
        }
        if (newOpt.title_pos) {
          pie_title_pos = newOpt.title_pos
        }
        if (newOpt.tooltip) {
          pie_tooltip = newOpt.tooltip
        }
        if (newOpt.toolbox) {
          pie_toolbox = newOpt.toolbox
        }
        if (newOpt.pie_pos) {
          pie_pie_pos = newOpt.pie_pos
        }
        if (newOpt.pie_radius) {
          pie_pie_radius = newOpt.pie_radius
        }
        if (newOpt.legend) {
          pie_legend = newOpt.legend
        }
        if (newOpt.legend_top) {
          pie_legend_top = newOpt.legend_top
        }
        if (newOpt.legend_left) {
          pie_legend_left = newOpt.legend_left
        }
        if (newOpt.pie_ring) {
          pie_pie_ring = newOpt.pie_ring
        }
      }

      // 配置option
      let options = {
        title: {
          text: pie_title, // 大标题
          subtext: pie_subtitle, // 副标题
          left: pie_title_pos //标题位置
        },
        tooltip: {
          trigger: pie_tooltip ? 'item' : '',
          formatter: '{b}: {c} ({d}%)'
        },
        toolbox: {
          // 工具栏
          show: pie_toolbox,
          iconStyle: {
            color: '#FFEA51',
            borderColor: '#FFA74D',
            borderWidth: 1
          },
          feature: {
            saveAsImage: { show: true }
          }
        },
        series: [
          {
            type: 'pie',
            center: ['50%', '50%'],
            label: {
              normal: {
                position: pie_pie_pos,
                formatter: '{b}\r\n{d}%'
              }
            },
            radius: `${pie_pie_radius}%`,
            data: pie_series
          }
        ]
      }
      if (pie_legend) {
        options.legend = {
          top: pie_legend_top,
          left: pie_legend_left,
          orient: 'vertical'
        }
      }
      if (!pie_series) {
        options.series[0].label.normal.position = 'inner'
        options.series[0].data = [{ name: '暂无数据', value: 0.0 }]
      }
      if (pie_pie_ring) {
        options.series[0].radius = [`${pie_pie_radius * 0.6}%`, `${pie_pie_radius}%`]
      }

      return options
    },
    /**
     * 混合图例 bar 混合 line
     */
    mix() {
      const options = this.mix_option()
      this.initECharts(options)
    },
    /**
     * 配置混合图option
     */
    mix_option(newOpt) {
      let mix_title = this.title
      let mix_subtitle = this.subtitle
      let mix_title_pos = this.title_pos
      let mix_xname = this.xname
      let mix_xside = this.xside
      let mix_yname_l = this.yname_l
      let mix_y0_l = this.y0_l
      let mix_show_y_l = this.show_y_l
      let mix_unit_l = this.unit_l
      let mix_yname_r = this.yname_r
      let mix_y0_r = this.y0_r
      let mix_show_y_r = this.show_y_r
      let mix_unit_r = this.unit_r
      let mix_tooltip = this.tooltip
      let mix_toolbox = this.toolbox
      let mix_legend = this.legend
      let mix_legend_top = this.legend_top
      let mix_legend_left = this.legend_left
      let mix_xinterval = this.xinterval
      let mix_xrotate = this.xrotate
      let mix_series = this.series
      let mix_series_r = this.series_r

      if (newOpt) {
        if (newOpt.title) {
          mix_title = newOpt.title
        }
        if (newOpt.subtitle) {
          mix_subtitle = newOpt.subtitle
        }
        if (newOpt.title_pos) {
          mix_title_pos = newOpt.title_pos
        }
        if (newOpt.xname) {
          mix_xname = newOpt.xname
        }
        if (newOpt.xside) {
          mix_xside = newOpt.xside
        }
        if (newOpt.yname_l) {
          mix_yname_l = newOpt.yname_l
        }
        if (newOpt.y0_l) {
          mix_y0_l = newOpt.y0_l
        }
        if (newOpt.show_y_l) {
          mix_show_y_l = newOpt.show_y_l
        }
        if (newOpt.unit_l) {
          mix_unit_l = newOpt.unit_l
        }
        if (newOpt.yname_r) {
          mix_yname_r = newOpt.yname_r
        }
        if (newOpt.y0_r) {
          mix_y0_r = newOpt.y0_r
        }
        if (newOpt.show_y_r) {
          mix_show_y_r = newOpt.show_y_r
        }
        if (newOpt.unit_r) {
          mix_unit_r = newOpt.unit_r
        }
        if (newOpt.tooltip) {
          mix_tooltip = newOpt.tooltip
        }
        if (newOpt.toolbox) {
          mix_toolbox = newOpt.toolbox
        }
        if (newOpt.legend) {
          mix_legend = newOpt.legend
        }
        if (newOpt.legend_top) {
          mix_legend_top = newOpt.legend_top
        }
        if (newOpt.legend_left) {
          mix_legend_left = newOpt.legend_left
        }
        if (newOpt.xinterval) {
          mix_xinterval = newOpt.xinterval
        }
        if (newOpt.xrotate) {
          mix_xrotate = newOpt.xrotate
        }
        if (newOpt.series) {
          mix_series = newOpt.series
        }
        if (newOpt.series_r) {
          mix_series_r = newOpt.series_r
        }
      }

      // 配置option
      let options = {
        title: {
          text: mix_title, // 大标题
          subtext: mix_subtitle, // 副标题
          left: mix_title_pos //标题位置
        },
        xAxis: [
          {
            type: 'category',
            name: mix_xname,
            barMaxWidth: 30,
            axisLabel: {
              show: true
            },
            data: mix_xside
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: mix_yname_l,
            scale: mix_y0_l, // 是否Y刻度从0开始
            axisLabel: {
              show: mix_show_y_l, // 是否显示坐标轴上的文字
              formatter: val => {
                return val + (mix_unit_l ? mix_unit_l : '')
              }
            },
            axisLine: { show: mix_show_y_l }, // 是否显示坐标轴线
            axisTick: { show: mix_show_y_l }, // 是否显示坐标轴刻度线
            splitLine: { show: mix_show_y_l } // 是否显示网格线
          },
          {
            type: 'value',
            name: mix_yname_r,
            scale: mix_y0_r,
            axisLabel: {
              show: mix_show_y_r,
              formatter: val => {
                return val + (mix_unit_r ? mix_unit_r : '')
              }
            },
            axisLine: { show: mix_show_y_r }, // 是否显示坐标轴线
            axisTick: { show: mix_show_y_r }, // 是否显示坐标轴刻度线
            splitLine: { show: mix_show_y_r } // 是否显示网格线
          }
        ],
        series: []
      }

      if (mix_tooltip) {
        options.tooltip = {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        }
      }

      if (mix_toolbox) {
        options.toolbox = {
          show: true,
          orient: 'vertical',
          right: '1%',
          top: '2%',
          iconStyle: {
            color: '#FFEA51',
            borderColor: '#FFA74D',
            borderWidth: 1
          },
          feature: {
            saveAsImage: { show: true },
            magicType: {
              show: true,
              type: ['line', 'bar', 'stack', 'tiled']
            },
            restore: { show: true }
          }
        }
      }

      if (mix_legend) {
        options.legend = {
          top: mix_legend_top,
          left: mix_legend_left,
          data: this.seriname
        }
      }

      if (mix_xinterval) {
        options.xAxis[0].axisLabel.interval = mix_xinterval
      }
      if (mix_xrotate) {
        options.xAxis[0].axisLabel.rotate = mix_xrotate
      }

      mix_series.forEach((v, i) => {
        options.series.push({
          name: v.name,
          type: 'bar',
          data: v.value
        })

        this.seriname.push(v.name)
      })
      mix_series_r.forEach((v, i) => {
        options.series.push({
          yAxisIndex: 1,
          name: v.name,
          type: 'line',
          symbol: 'circle',
          symbolSize: 32,
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: 'inside'
              }
            }
          },
          data: v.value
        })

        this.seriname.push(v.name)
      })

      return options
    },
    /**
     * 散点图
     */
    scatter() {
      const options = this.scatter_option()
      this.initECharts(options)
    },
    /**
     * 配置散点图option
     */
    scatter_option(newOpt) {
      let scatter_title = this.title
      let scatter_subtitle = this.subtitle
      let scatter_title_pos = this.title_pos
      let scatter_toolbox = this.toolbox
      let scatter_xname = this.xname
      let scatter_show_x = this.show_x
      let scatter_yname_l = this.yname_l
      let scatter_show_y_l = this.show_y_l
      let scatter_legend = this.legend
      let scatter_legend_top = this.legend_top
      let scatter_legend_left = this.legend_left
      let scatter_tooltip = this.tooltip
      let scatter_series = this.series
      let scatter_type = this.type

      if (newOpt) {
        if (newOpt.title) {
          scatter_title = newOpt.title
        }
        if (newOpt.subtitle) {
          scatter_subtitle = newOpt.subtitle
        }
        if (newOpt.title_pos) {
          scatter_title_pos = newOpt.title_pos
        }
        if (newOpt.toolbox) {
          scatter_toolbox = newOpt.toolbox
        }
        if (newOpt.xname) {
          scatter_xname = newOpt.xname
        }
        if (newOpt.show_x) {
          scatter_show_x = newOpt.show_x
        }
        if (newOpt.yname_l) {
          scatter_yname_l = newOpt.yname_l
        }
        if (newOpt.show_y_l) {
          scatter_show_y_l = newOpt.show_y_l
        }
        if (newOpt.legend) {
          scatter_legend = newOpt.legend
        }
        if (newOpt.legend_top) {
          scatter_legend_top = newOpt.legend_top
        }
        if (newOpt.legend_left) {
          scatter_legend_left = newOpt.legend_left
        }
        if (newOpt.tooltip) {
          scatter_tooltip = newOpt.tooltip
        }
        if (newOpt.series) {
          scatter_series = newOpt.series
        }
        if (newOpt.type) {
          scatter_type = newOpt.type
        }
      }

      // 配置option
      let options = {
        title: {
          text: scatter_title, // 大标题
          subtext: scatter_subtitle, // 副标题
          left: scatter_title_pos //标题位置
        },
        toolbox: {
          // 工具栏
          show: scatter_toolbox,
          iconStyle: {
            color: '#FFEA51',
            borderColor: '#FFA74D',
            borderWidth: 1
          },
          feature: {
            saveAsImage: { show: true }
          }
        },
        xAxis: {
          name: scatter_xname,
          nameLocation: 'center',
          nameGap: 26,
          minInterval: 1, // 设置只显示整数
          axisLabel: { show: scatter_show_x }, // 是否显示坐标轴上的文字
          axisTick: { show: scatter_show_x }, // 是否显示坐标轴刻度线
          splitLine: {
            show: false,
            lineStyle: { type: 'dashed' }
          }
        },
        yAxis: {
          name: scatter_yname_l,
          nameLocation: 'center',
          nameGap: 35,
          nameRotate: 90,
          minInterval: 1, // 设置只显示整数
          axisLabel: { show: scatter_show_y_l }, // 是否显示坐标轴上的文字
          axisTick: { show: scatter_show_y_l }, // 是否显示坐标轴刻度线
          splitLine: {
            lineStyle: { type: 'dashed' }
          },
          scale: true
        },
        series: []
      }

      if (scatter_legend) {
        options.legend = {
          top: scatter_legend_top,
          left: scatter_legend_left,
          data: this.seriname
        }
      }

      if (scatter_tooltip) {
        options.tooltip = {
          padding: 10,
          backgroundColor: '#222',
          borderColor: '#777',
          borderWidth: 1,
          formatter: obj => {
            return `<div style="border-bottom: 1px solid rgba(255,255,255,.3);
                    font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">
                    ${obj.data[3]}</div>${scatter_yname_l ? scatter_yname_l + '：' + obj.data[1] + '<br>' : ''}
                    ${scatter_xname ? scatter_xname + '：' + obj.data[0] + '<br>' : ''}`
          }
        }
      }

      scatter_series.forEach((v, i) => {
        options.series.push({
          name: v.name,
          data: v.value,
          type: scatter_type,
          symbolSize: function(da) {
            return Math.sqrt(da[2]) / 1e2
          },
          emphasis: {
            label: {
              show: false,
              formatter: function(param1) {
                return param1.data[3]
              },
              position: 'top'
            }
          }
        })

        this.seriname.push(v.name)
      })

      return options
    },
    /**
     * 雷达图
     */
    radar() {
      const options = this.radar_option()
      this.initECharts(options)
    },
    /**
     * 配置雷达图option
     */
    radar_option(newOpt) {
      let radar_title = this.title
      let radar_subtitle = this.subtitle
      let radar_title_pos = this.title_pos
      let radar_toolbox = this.toolbox
      let radar_indicator = this.indicator
      let radar_type = this.type
      let radar_series = this.series
      let radar_legend = this.legend
      let radar_legend_top = this.legend_top
      let radar_legend_left = this.legend_left
      let radar_tooltip = this.tooltip

      if (newOpt) {
        if (newOpt.title) {
          radar_title = newOpt.title
        }
        if (newOpt.subtitle) {
          radar_subtitle = newOpt.subtitle
        }
        if (newOpt.title_pos) {
          radar_title_pos = newOpt.title_pos
        }
        if (newOpt.toolbox) {
          radar_toolbox = newOpt.toolbox
        }
        if (newOpt.indicator) {
          radar_indicator = newOpt.indicator
        }
        if (newOpt.type) {
          radar_type = newOpt.type
        }
        if (newOpt.series) {
          radar_series = newOpt.series
        }
        if (newOpt.legend) {
          radar_legend = newOpt.legend
        }
        if (newOpt.legend_top) {
          radar_legend_top = newOpt.legend_top
        }
        if (newOpt.legend_left) {
          radar_legend_left = newOpt.legend_left
        }
        if (newOpt.tooltip) {
          radar_tooltip = newOpt.tooltip
        }
      }

      // 配置option
      let options = {
        title: {
          text: radar_title, // 大标题
          subtext: radar_subtitle, // 副标题
          left: radar_title_pos //标题位置
        },
        toolbox: {
          // 工具栏
          show: radar_toolbox,
          iconStyle: {
            color: '#FFEA51',
            borderColor: '#FFA74D',
            borderWidth: 1
          },
          feature: {
            saveAsImage: { show: true }
          }
        },
        radar: {
          indicator: radar_indicator
        },
        series: [
          {
            type: radar_type,
            data: radar_series
          }
        ]
      }

      if (radar_legend) {
        options.legend = {
          top: radar_legend_top,
          left: radar_legend_left,
          data: this.seriname
        }
      }
      if (radar_tooltip) {
        options.tooltip = {}
      }

      radar_series.forEach((v, i) => {
        this.seriname.push(v.name)
      })

      return options
    },
    /**
     * 直方图
     */
    histogram() {
      this.initECharts(this.histogram_option())
    },
    boxplot() {
      this.initECharts(this.boxplot_option())
    },
    boxplot_option(opt) {
      let title = this.title
      let subtitle = this.subtitle
      let title_pos = this.title_pos
      let xname = this.xname
      let yname_l = this.yname_l
      let data = this.series
      let xside = this.xside

      if (opt) {
        if (opt.title) {
          title = opt.title
        }
        if (opt.subtitle) {
          subtitle = opt.subtitle
        }
        if (opt.title_pos) {
          title_pos = opt.title_pos
        }
        if (opt.xname) {
          xname = opt.xname
        }
        if (opt.yname_l) {
          yname_l = opt.yname_l
        }
        if (opt.series) {
          data = opt.series
        }
        if (opt.xside) {
          xside = opt.xside
        }
      }

      var option = {
        title: [
          {
            text: title,
            left: 'center'
          }
        ],
        tooltip: {
          trigger: 'item', //触发类型,数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
          axisPointer: {
            //指示器类型。
            type: 'shadow'
          }
        },
        // grid: {
        //   //直角坐标系网格。
        //   //show: true,//default: false
        //   left: '15%',
        //   right: '15%',
        //   bottom: '23%',
        //   //borderWidth: 1,
        //   //borderColor: '#000',
        // },
        xAxis: {
          name: xname,
          //X轴
          type: 'category', //'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
          //data: data.axisData,
          data: xside,
          boundaryGap: true, //类目轴中 boundaryGap 可以配置为 true 和 false。默认为 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
          nameGap: 30, //坐标轴名称与轴线之间的距离。
          splitArea: {
            //坐标轴在 grid 区域中的分隔区域，默认不显示。
            //show: true, //是否显示分隔区域
            //interval: 'auto', //坐标轴分隔区域的显示间隔，在类目轴中有效
          },
          axisLabel: {
            //坐标轴刻度标签的相关设置。
            //formatter: 'expr {value}',  // 使用字符串模板，模板变量为刻度默认标签 {value}
            show: true, //是否显示刻度标签。
            //interval: 'auto', //坐标轴刻度标签的显示间隔，在类目轴中有效。
            color: 'black'
          },
          splitLine: {
            //坐标轴在 grid 区域中的分隔线。
            show: true, //是否显示分隔线。默认数值轴显示，类目轴不显示。
            lineStyle: {
              //分隔线样式
              type: 'dashed' //分隔线线的类型。
            }
          },
          axisLine: {
            //坐标轴轴线相关设置。
            show: true, //是否显示坐标轴轴线。
            //onZero:false,//X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴且包含 0 刻度时有效。
            //symbol:'arrow', //轴线两边的箭头, 默认不显示箭头，即 'none'
            lineStyle: {
              //轴线样式
              width: 1,
              color: 'black'
              //opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
            }
          },
          axisTick: {
            //坐标轴刻度相关设置。
            show: true //是否显示坐标轴刻度。
            //alignWithLabel: true,//类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐,default: false
          }
        },
        yAxis: {
          name: yname_l,
          //y轴
          type: 'value',
          splitArea: {
            //坐标轴在 grid 区域中的分隔区域，默认不显示。
            //show: true
          },
          axisLabel: {
            //坐标轴刻度标签的相关设置。
            //formatter: 'expr {value}',  // 使用字符串模板，模板变量为刻度默认标签 {value}
            show: true, //是否显示刻度标签。
            //interval: 'auto', //坐标轴刻度标签的显示间隔，在类目轴中有效。
            color: 'black'
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed'
            }
          },
          axisLine: {
            show: true, //是否显示坐标轴轴线。
            //onZero:false,//X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴且包含 0 刻度时有效。
            //symbol:'arrow', //轴线两边的箭头
            lineStyle: {
              width: 1,
              color: 'black'
            }
          }
        },
        series: [
          {
            name: 'boxplot', //箱形图
            type: 'boxplot',
            //legendHoverLink: true, //是否启用图例 hover 时的联动高亮。
            //hoverAnimation: false, //是否开启 hover 在 box 上的动画效果。
            itemStyle: {
              //盒须图样式。
              //color: '#fff', //boxplot图形的颜色。 默认从全局调色盘 option.color 获取颜色
              borderColor: 'blue' //boxplot图形的描边颜色。支持的颜色格式同 color，不支持回调函数。
            },
            data: data,
            tooltip: {
              //注意：series.tooltip 仅在 tooltip.trigger 为 'item' 时有效。
              formatter: function(param) {
                return [
                  '簇名: ' + param.name,
                  '上边缘: ' + param.data[5],
                  '上四分位数: ' + param.data[4],
                  '中位数: ' + param.data[3],
                  '下四分位数: ' + param.data[2],
                  '下边缘: ' + param.data[1]
                ].join('<br/>')
              }
            }
          }
        ]
      }
      return option
    },
    /**
     * 配置直方图option
     */
    histogram_option(newOpt) {
      console.log('this.histogram_min', this.histogram_min)
      let title = this.title
      let subtitle = this.subtitle
      let title_pos = this.title_pos
      let xname = this.xname
      let yname_l = this.yname_l
      let toolbox = this.toolbox
      let girth = this.series

      if (newOpt) {
        if (newOpt.title) {
          title = newOpt.title
        }
        if (newOpt.subtitle) {
          subtitle = newOpt.subtitle
        }
        if (newOpt.title_pos) {
          title_pos = newOpt.title_pos
        }
        if (newOpt.toolbox) {
          toolbox = newOpt.toolbox
        }
        if (newOpt.xname) {
          xname = newOpt.xname
        }
        if (newOpt.yname_l) {
          yname_l = newOpt.yname_l
        }
        if (newOpt.series) {
          girth = newOpt.series
        }
      }

      var bins = ecStat.histogram(girth)
      var interval
      var min = Infinity
      var max = -Infinity

      var data = echarts.util.map(bins.data, function(item, index) {
        var x0 = bins.bins[index].x0
        var x1 = bins.bins[index].x1
        interval = x1 - x0
        min = Math.min(min, x0)
        max = Math.max(max, x1)
        if (!item[1]) {
          item[1] = null
        }
        return [x0, x1, item[1]]
      })
      if (this.histogram_min != null) {
        min = this.histogram_min
      }
      console.log('min', min)
      // 配置option
      let options = {
        title: {
          text: title, // 大标题
          subtext: subtitle, // 副标题
          left: title_pos //标题位置
        },
        tooltip: {
          trigger: 'axis',
          formatter: function(data) {
            var num = data[0].data[2] == null ? 0 : data[0].data[2]
            num = String(num).replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g, '$1,')
            var res = data[0].data[0] + ' 到 ' + data[0].data[1] + '<br/>'
            res = res + data[0].marker + '数量：' + num
            return res
          }
        },
        toolbox: {
          // 工具栏
          show: toolbox,
          iconStyle: {
            color: '#FFEA51',
            borderColor: '#FFA74D',
            borderWidth: 1
          },
          feature: {
            saveAsImage: { show: true }
          }
        },
        color: ['#37a2da'],
        xAxis: [
          {
            type: 'value',
            name: xname,
            min: min,
            max: max,
            interval: this.histogram_interval || interval,
            axisLabel: {
              formatter: function(value, index) {
                if (parseInt(value) < parseFloat(value)) {
                  return value.toFixed(2)
                }
                return value
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: yname_l,
            minInterval: 1
          }
        ],
        series: [
          {
            name: 'height',
            type: 'custom',
            renderItem: renderItem,
            label: {
              show: true,
              position: 'insideTop'
            },
            encode: {
              x: [0, 1],
              y: 2,
              tooltip: 2,
              label: 2
            },
            data: data
          }
        ]
      }
      console.log('options.xAxis[0].min', options.xAxis[0].min)
      return options
    }
  }
}
</script>
